<template>
  <div class="goods-list" v-infinite-scroll="bindLoad" :infinite-scroll-disabled="disabled">
    <template v-if="state.total">
      <template v-if="state.dataList.length">
        <goods-item v-for="(goods, index) in state.dataList" :key="goods.id" :item="goods" :index="index"></goods-item>
      </template>
      <p class="goods-list--tips" v-if="state.loading">Loading...</p>
      <p class="goods-list--tips" v-if="!state.loading && state.noMore">没有更多了</p>
    </template>
    <el-empty style="width: 100%;" v-else description="暂无商品" />
  </div>
</template>

<script setup name="goodsList">
import { appIndexListPost } from '@/api/common'
import goodsItem from './goods.vue'
import { nextTick } from 'vue'
const props = defineProps({
  /*
   * 排序方式 1:销量 2:价格 3:上架时间 不填为默认排序 string-body
   */
  sortType: {
    type: String,
    default: '',
    validator (value, props) {
      return ['', '1', '2', '3'].includes(value)
    }
  },
  /*
   * 是否倒序 Y 倒序 N 正序
   */
  isDesc: {
    type: String,
    default: '',
    validator (value, props) {
      return ['', 'Y', 'N'].includes(value)
    }
  },
  /*
   * 是否首页推荐 Y 是 N  不是 可以为空
   */
  isTop: {
    type: String,
    default: '',
    validator (value, props) {
      return ['', 'Y', 'N'].includes(value)
    }
  },
  /*
   * 最高价 可以为空
   */
  maxPrice: {
    type: [String, Number],
    default: ''
  },
  /*
   * 最低价 可以为空
   */
  minPrice: {
    type: [String, Number],
    default: ''
  },
  /*
   * 搜索关键字
   */
  search: {
    type: String,
    default: ''
  },
  /*
   * 店铺Id 可以为空
   */
  shopId: {
    type: String,
    default: ''
  },
  /*
   * 类型Id 可以为空
   */
  typeId: {
    type: String,
    default: ''
  },
  /*
   * 当前页码
   */
  pageNum: {
    type: Number,
    default: 1
  },
  /*
   * 当前页大小
   */
  pageSize: {
    type: Number,
    default: 12
  }
})
const { proxy } = getCurrentInstance()
const emit = defineEmits(['total'])
const state = reactive({
  dataList: [],
  total: 0,
  loading: false,
  noMore: false,
  error: false
})
const queryData = reactive({
  sortType: props.sortType, // 排序方式 1:销量 2:价格 3:上架时间 不填为默认排序 string-body
  isDesc: props.isDesc, // 是否倒序 Y 倒序 N 正序 默认倒序 string-body
  isTop: props.isTop, // 是否首页推荐 Y 是 N  不是 可以为空 string-body
  maxPrice: props.maxPrice, // 最高价 可以为空 string-body
  minPrice: props.minPrice, // 最低价 可以为空 string-body
  search: props.search, // 搜索关键字 可以为空 string-body
  shopId: props.shopId, // 店铺Id 可以为空 string-body
  typeId: props.typeId, // 类型Id 可以为空 string-body
  pageNum: props.pageNum, // 当前页码 number-query
  pageSize: props.pageSize // 当前页大小 number-query
})
const disabled = computed(() => state.loading || state.noMore)
const configProperties = {
  body: ['isDesc', 'isTop', 'maxPrice', 'minPrice', 'search', 'shopId', 'sortType', 'typeId'],
  params: ['pageNum', 'pageSize']
}
const bindLoad = () => {
  if (state.noMore) return
  state.loading = true
  const data = proxy.$formatData({ data: queryData, configProperties })
  appIndexListPost(data).then((res) => {
    if (res.data.records.length > 0) {
      const newGoods = res.data.records
      const total = parseInt(res.data.total)
      state.total = total
      state.noMore = total <= queryData.pageSize * queryData.pageNum
      state.dataList.push(...newGoods)
      nextTick(() => {
        queryData.pageNum++
        state.loading = false
        emit('total', state.total)
      })
    } else {
      state.noMore = true
    }
  }).catch(() => {
    state.error = true
  }).finally(() => {
    console.log('end')
    state.loading = false
  })
}
const propsWatch = watch(
  () => props,
  (d) => {
    for (const key in d) {
      if (Object.hasOwnProperty.call(queryData, key)) {
        queryData[key] = d[key]
      }
    }
    setDefault()
    bindLoad()
  },
  { deep: true, flush: 'post' }
)
const setDefault = (t) => {
  state.dataList = []
  state.total = 0
  state.loading = false
  state.noMore = false
  state.error = false
  emit('total', state.total)
}
defineExpose({
  loadMore: bindLoad,
  resetData: setDefault
})
</script>

<style lang="scss" scoped>
.goods-list {
  display: flex;
  flex-wrap: wrap;

  &--tips {
    width: 100%;
    text-align: center;
  }
}
</style>